<!--
 * @Descripttion: 
 * @version: 
 * @Author: wutao
 * @LastEditors: wutao
 * @LastEditTime: 2025-09-18 22:33:06
-->
<template>
  <div>
    <!-- <div class="top_hytitle" style="margin-top: 0;">
            <div class="letf_line"></div>
            <div class="center_text">欢迎回来</div>
            <div class="right_line"></div>
          </div> -->
    <div class="">
      <p style="margin: 15px 0; color: #9998a9">
        {{ formatTimestamp(topList.createTime) }}
      </p>

      <div class="top-box " :class="isShadow?'boxShadow':''">
      <div class="xiahuaxian" style="font-weight: bold; font-size:18px; display:inline-block; transform: skew(-11deg);">
  8月收益月报
</div>

     

        <div></div>
        <div
          class="top-box-list"
          style="
            background: linear-gradient(
              180deg,
              rgba(8, 131, 241, 0.028) 0%,
              rgba(8, 131, 241, 0.012) 100%
            );
            border: 1px solid rgba(8, 131, 241, 0.08);
            position: relative;
            padding-bottom: 2px;
          "
        >
          <div
            v-for="(topItemCard, topItemIndex) in topList.card"
            class="top-box-list-item top-box-list-item-border"
            style="
              background: linear-gradient(
                180deg,
                rgba(8, 131, 241, 0.028) 0%,
                rgba(8, 131, 241, 0.012) 100%
              );
            "
            :key="topItemIndex"
          >
<p
  class="ztfx-span"
  v-html="
    topItemCard.name
      // 只给第一个百分比加红色加粗
      .replace(/(\d+(\.\d+)?%)/, '<span style=&quot;color:red;font-weight:bold;&quot;>$1</span>')
      // 给冒号后的文字加 class 或行内样式
      .replace(
        /:(.*)/,
        ':<span style=&quot;color:#333333;font-family:\'PingFang SC\';font-weight:bold;font-size:16px;display:inline;background-image:linear-gradient(to bottom, transparent 60%, #c1d8fc 40%);background-size:100% 100%;background-repeat:no-repeat;&quot;>$1</span>'
      )
  "
></p>



          </div>
        </div>
        <p
          style="
            font-size: 14px;
            font-weight: 500;
            margin-top: 10px;
            margin-bottom: 5px;
          "
        >
          期末总资产
        </p>
        <p class="top-box-list-item-red" style="color: black; width: 100%">
          {{ topList.card[0].up }}
        </p>
        <div style="width: 100%; height: 200px; position: relative">
          <!-- <img src="../../assets/iconIndex/ptzd_bg.png" class="ptzd_bg" alt=""> -->
          <!-- <div class="ptzd_bg"> -->
            <div
              ref="myChart"
              style="width: 100%; height: 100%"
              class="mycharts"
            ></div>
          <!-- </div> -->
        </div>
        <p style="font-size: 15px; line-height: 20px; " class="xiahuaxiana">
          {{ topList.card[0].content }}
        </p>

        <div
          class="gzlc_box"
          v-for="(item, index) in topList.linkUrl"
          :key="'list2-' + index"
          @click="gotodetails(item)"
        >
          <img src="../../assets/iconIndex/shouyi.png" alt="" />
          <p>{{ item.name }}</p>
        </div>
        <div class="top-box-btn" @click="djrbseechance">去查看月度对账单</div>

        <p class="askMe">你可以尝试这样问我</p>
        <div
          @click="sendMessageBy(topItemLink)"
          v-for="(topItemLink, topItemLinkIndex) in topList.link"
          class="top-box-list-item-link"
          :key="topItemLinkIndex"
        >
          {{ topItemLink }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import {} from "@/utils/common";
import { Toast } from "vant";
import commonFunc from "@/utils/ysjh";
export default {
  data() {
    return {};
  },
  props: {
    topList: {
      type: Object,
      default: () => {},
    },isShadow: {
    type: Boolean,
    default: false,
  },
  },
  watch: {},
  mounted() {
    console.log(111, this.topList.card[0].chartDataList);

    this.$nextTick(() => {
      const card = this.topList.card?.[0];
      if (!card?.chartDataList?.length) return;

      const total = Number(card.up); // 总资产
      const colorMap = {
        股票: "#00BFFF", // 天蓝色
        基金: "#FFA500", // 橘黄色
        其他: "#2F77FC", // 深蓝色
      };

      const chartData = card.chartDataList.map((item) => {
        const color = colorMap[item.name] || undefined;
        const value = Number(item.value);
        const percentage = ((value / total) * 100).toFixed(2);

        return {
          name: item.name,
          value,
          percentage,
          itemStyle: { color }, // 扇区颜色
          labelLine: { lineStyle: { color } }, // 线条颜色
        };
      });

      const chart = echarts.init(this.$refs.myChart);
      chart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        graphic: [
          {
            type: "group",
            left: "50%",
            top: "50%",
            bounding: "raw",
            children: [
              {
                type: "text",
                z: 100,
                top: -10,
                style: {
                  text: `${card.upData}`, // 第一行文字
                  fill: card.upData < 0 ? "#00A767" : "#FF0000", // 根据正负设置颜色
                  font: "bold 16px sans-serif",
                  textAlign: "center",
                  textVerticalAlign: "middle",
                },
              },
              {
                type: "text",
                z: 100,
                top: 10, // 第一行下方偏移
                style: {
                  text: "本月盈亏", // 第二行文字
                  fill: "#999",
                  font: "12px sans-serif",
                  textAlign: "center",
                  textVerticalAlign: "middle",
                },
              },
            ],
          },
        ],
        series: [
          {
            name: "资产占比",
            type: "pie",
            radius: ["60%", "80%"],
            avoidLabelOverlap: false, // 保证 label 不重叠
            itemStyle: { borderColor: "#fff", borderWidth: 2 },
            minAngle: 30, // 最小扇区角度，防止过小扇区文字被遮挡
            label: {
              show: true,
              position: "outside", // 文字还是外部显示
              distance: 10, // 默认大约 15-20，把它调小一些，让文字靠近饼
              formatter: (params) =>
                `{value|${params.value}}\n{name|${params.name}}`,
              rich: {
                value: { color: "red", fontSize: 14, fontWeight: "bold" },
                name: { color: "#999", fontSize: 12 },
              },
            },
            labelLine: {
              show: true,
              length: 10, // 把线条长度调短
              length2: 8,
              lineStyle: {
                width: 2,
                color: (params) => colorMap[params.name] || params.color,
              },
            },
            data: chartData,
          },
        ],
      });
    });
  },
  created() {},
  methods: {
    djrbseechance() {
      let openSource = this.topList.url.openSource;
      let openType = this.topList.url.openType;
      let functionCode = this.topList.url.functionCode;
      let param = this.topList.url.param;
      commonFunc.openService(openSource, openType, functionCode, param);
    },
    gotodetails(item) {
      console.log(item.url, "item");
      const { openSource, openType, functionCode, param } = item.url;
      commonFunc.openService(openSource, openType, functionCode, param);
    },
    sendMessageBy(e) {
      this.$parent.showCollect = false;
      this.$parent.someMethod(e);
    },

    formatTimestamp(ms) {
      if (!ms) {
        return "";
      }
      const time = Number(ms);
      if (!time || isNaN(time)) return "-";
      const d = new Date(time);
      const Y = d.getFullYear();
      const M = String(d.getMonth() + 1).padStart(2, "0");
      const D = String(d.getDate()).padStart(2, "0");
      const h = String(d.getHours()).padStart(2, "0");
      const m = String(d.getMinutes()).padStart(2, "0");
      const s = String(d.getSeconds()).padStart(2, "0");
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    },
  },
};
</script>

<style lang="less" scoped>
.ztfx-span {
  opacity: 1;
  color: #333333 !important;
  font-family: PingFang SC;
  font-weight: regular;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0px;
  background: none !important;
  font-weight: normal !important;
  text-align: justify; /* 整体文字两端对齐（多行时每行左右对齐） */
  text-align-last: left; /* 最后一行不满时，强制靠左对齐 */
}

.top-box-list-item-border {
  // border-bottom: 1px solid #aecde8;
}

.gzlc_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 97px;
  height: 36px;
  background: url("@/assets/images/gzlc_box.png") no-repeat center center;
  background-size: 100% 100%;
  margin-top: 15px;
  font-size: 13px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 20px;

  img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-left: 10px;
    vertical-align: middle;
  }
}
.guoqing {
  position: absolute;
  top: -20px;
  left: 0;
  background: url("@/assets/iconIndex/guoqing.png") no-repeat center center;
  width: 146px;
  height: 39px;
  background-size: 146px 39px;
  color: white;
  padding-top: 5px;
  box-sizing: border-box;
  font-size: 15px;
  text-align: center;
  font-style: italic;
}

.ztfx-span-style {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 上对齐，避免多行时错位 */
}

.ztfx-span-style strong {
  font-weight: bold;
  white-space: nowrap; /* 不换行 */
}

.ztfx-span-style span {
  flex: 1; /* 占满剩余空间 */
  margin-left: 10px; /* 和左边留点间距 */
  text-align: left; /* 文字靠左展示，避免被挤压 */
  word-break: break-all; /* 允许在任意字符处换行 */
  overflow-wrap: anywhere; /* 现代浏览器强制自动换行 */
}
.chifu-dongtai {
  width: 100%;
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 0px;
}
.chifu-dongtai img {
  height: 126px;
  width: 175px;
}
.top-box-list-item-red {
  color: black !important;
  font-family: PingFang SC;
  font-weight: bold;
  display: inline-block;
  font-size: 20px;
  display: inline;
  background-image: linear-gradient(to bottom, transparent 60%, #c1d8fc 50%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.ydzd_logo {
  width: 83px;
  height: 16px;
}
.ptzd_bg {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: url("@/assets/iconIndex/ptzd_bg.png") no-repeat center center;
  background-size: 100% 100%;
}
.xiahuaxian {
  color: #333333;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 16px;
  display: inline;

  /* 多重背景：
     - 上层：左到右渐变，左边延长
     - 下层：原上下蓝色渐变 */
  background-image: 
    linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%), /* 左边透明占40%，右边渐变到白色 */
    linear-gradient(to bottom, transparent 60%, #c1d8fc 40%); /* 原上下蓝色渐变 */

  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.xiahuaxiana {
  color: #333333;
  font-family: PingFang SC;
  font-weight: bold;
  display: inline;
  background-image: linear-gradient(to bottom, transparent 60%, #c1d8fc 40%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>